<script setup>
  import { ref, onMounted } from 'vue' 
  import { useStore } from '@/store/index.js';
  import { useStyleStore } from "@/store/styleStore.js";

  let delayLoadAnimation = ref(false)

  let store = useStore();
  let styleStore = useStyleStore();

  onMounted(() => {
    setTimeout(() => {
      delayLoadAnimation.value = true;
    }, 2000)
  })

  let textList = [
      '世事皆天意',
      '知不可乎骤得 托遗响于悲风',
      '远的东西看得很清楚 近的却看不见',
      '有了痛苦和矛盾才明白幸福的意义',
      '仁慈在于 只要你往前走 它总是给路',
      '热闹的表象下是具有原因的强撑汹涌',
      '能同行的人 比风景更重要',
      '即使是片刻的开心也想去享受',
      '挫折和离别都是生命中的点缀',
      '假如我年少有为不自卑',
      '你如何看待世界 取决于你的心态',
      '一起成为更好的人 这是新的约定',
      '无所图 越简单越幸福',
      '心平能愈三千疾',
      '自由在远方 答案在路上',
      '不快乐就皱眉 总有人爱你的每一面',
      '生活没有同花顺 人生的底牌永远是自己',
      '当太阳升起时 就把昨天忘掉',
      '等明天太阳初升 我们都要变得更幸福',
  ]

  const getRandomText = () => {
    let index = Math.floor(Math.random() * (textList.length - 1));
    return textList[index];
  }
  
  let text = ref(getRandomText());

  let cutText = () => {
    text.value = getRandomText();
  }

</script>
<template>
  <div :class="['chicken-soup-basic',
      styleStore.chickenSoup.status === 1 ? 'basic-show-animation':'',
      styleStore.chickenSoup.status === 2 ? 'basic-hide-animation':'',
       delayLoadAnimation ? 'delayLoadStyle':'']" title="切换展示文案" @click="cutText">
    「&nbsp;&nbsp;<span>{{ text }}</span>&nbsp;&nbsp;」
  </div>
</template>
<style scoped>

  /* 鸡汤组件最外层盒子基础样式 */
  .chicken-soup-basic {
    width: 300px;
    height: 50px;
    position: absolute;
    bottom: 2%;
    left: calc(50% - 150px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 10px;
    transition: background-color,opacity .3s;
    cursor: pointer;
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* 通用 */
    -webkit-touch-callout: none;
  }

  /* 鸡汤组件文字样式 */
  .chicken-soup-basic>span {
    font-size: 14px;
  }

  .chicken-soup-basic:hover {
    background-color: rgba(255, 255, 255, .1);
  }

  .delayLoadStyle {
    opacity: 1;
  }

  .basic-show-animation {
    animation-name: showAnimation;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
  }
  .basic-hide-animation {
    display: none;
    animation-name: hideAnimation;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
  }

  @keyframes showAnimation {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes hideAnimation {
    from {
      display: flex;
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

</style>